<template>
    <div class="dazhuanpanbox">
        <div class="lottery">
            <div class="dzpmain">
                <img class="dzpciclebg" src="http://hlj.offcn.com/zg/zgvipimg/dzpcicle.jpg" mode="widthFix" />
                <div class="dzpcicle" :style="{ transform: 'rotate(' + wheelDeg +'deg)' }">
                    <div class="prize-list">
                        <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
                            <div class="prize-item" :style="{ transform: 'rotate('+ (360/ prizeList.length) * index +'deg)' }">
                                <div class="prize-name">{{ item.prizename }}</div>
                                <div class="prize-icon">
                                    <img v-if="item.prizeimg" :src="item.prizeimg" alt="" mode="widthFix" />
                                    <img v-else src="http://hlj.offcn.com/zg/zgvipimg/left1.png" alt="" mode="widthFix" />
                                </div>
                                <p class="fuzline" :style="{ transform: 'rotate('+ (360/ prizeList.length) * index + (360/ prizeList.length)/2 +'deg)' }"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dzpcart" @click="choujiang"><img src="http://hlj.offcn.com/zg/zgvipimg/dzpcart.jpg" mode="widthFix" alt></div>
            </div>
        </div>
        <lotterymodal v-if="lotteryvisible" :visible.sync="lotteryvisible" :zjinfo="zjinfo"></lotterymodal>

        <van-dialog id="van-dialog" />
    </div>
</template>

<script>
    import { UpdataScore } from '@/utils/score'
    import Dialog from '@/static/dist/dialog/dialog';
    import lotterymodal from '@/components/modal/lotterymodal'
    export default {
        props: {
            prizeList: { type: Array, default: () => [], },
            actid: { type: Number, defaule: 0 },
        },
        name: "dazhuanpan",
        data() {
            return {
                lotteryvisible: false,
                zjinfo: {},
                rolling: false,
                wheelDeg: 0,
                prize: -1, // 中奖位置
            };
        },
        computed:{
            userdata(){
                return this.$store.getters.userdata ? this.$store.getters.userdata : ''
            },
        },
        mounted() {
        },
        methods: {
            choujiang(){
                var that = this
                if(!that.userdata){
                    Dialog.confirm({
                        title: '提示', message: '请先登录', confirmButtonText: '前往登陆', cancelButtonText: '取消'
                    }).then(() => {this.$router.push({ path: '/user/login' });}).catch(() => {});return
                }
                if (that.rolling) return;
                wx.request({
                    url: 'https://zg99.offcn.com/index/choujiang/lottery/?actid='+that.actid+'&callback=?',
                    method: 'get',
                    dataType: 'jsonp',
                    data: { name: that.userdata.name, phone: that.userdata.phone },
                    success: function (res) {
                        var resjson = JSON.parse(res.data.substr(1, res.data.length-2));
                        if(resjson.status==1){
                            that.zjinfo = that.prizeList.find((item,iti) => {
                                if(item.prizeid == resjson.prizeid) that.prize = iti
                                return item.prizeid == resjson.prizeid
                            })
                            that.startRoll();
                        }else{
                            Dialog.alert({
                                title: '提示',
                                message: resjson.msg,
                            });
                        }
                    },
                    complete: function() {
                    }
                })
            },
            startRoll() {
                var that = this
                if (that.rolling) return;
                that.rolling = true;
                const { wheelDeg, prizeList } = that;
                that.wheelDeg = wheelDeg - wheelDeg % 360 + 5 * 360 + (360 - 360 / prizeList.length * that.prize);
                setTimeout(() => {
                    that.rolling = false;
                    that.lotteryvisible = true
                    UpdataScore(that.zjinfo.prizescore)
                }, 4500);
            }
        },
        components: {
            lotterymodal
        },
    };
</script>

<style scoped>
</style>